<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/tool.js"></script>
    <style>
        form>div{
            margin-top: 10px;
        }
        .createCode{
            user-select: none;
        }
        .right{
            font-size: 12px;
            color:green;
        } 
        .error{
            font-size: 12px;
            color:red;
        }
    </style>
</head>

<body>
    <form class="form" onsubmit="return false">
        <div class="input-group">
            <lable>用户名:</lable>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <lable>手机号:</lable>
            <input type="text" class="phone">
            <span class="phone_tips"></span>
        </div>
        <!-- 123123@qq.com
        a123123@163.com
        a123123@gmail.com
        a123123@1000phone.com -->
        <div class="input-group">
            <lable>邮&emsp;箱:</lable>
            <input type="text" class="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <lable>验证码:</lable>
            <input type="text" class="code">
            <span class="createCode">xy1d</span>
            <span class="code_tips"></span>
        </div>

        <div class="input-group">
            <input type="submit" class="btn" value="注册">
        </div>
    </form>
</body>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头
    
    // 密码
    // 由数字 字母 _ 组成, 6-12位 
    // 密码强度
    // 如果 数字 大写字母 小写字母 _ 中只出现一种  弱   aaaaaa  111111 AAAAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现两种  中   aaa111  AAA111 aaaAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现三种  强   aaaAAA111  aaa111_  aaaAAA_
    // 如果 数字 大写字母 小写字母 _ 中只出现四种  超强 aaaAAA111_ 

    // 提升:  true + true + true + false = 3 

    // 确认密码 -> 密码成功的前提下,和密码保持一致

    // 验证码:  随机的验证码 和 用户输入的保持一直

    // 随机验证码
    // 随机验证码  => 从数字 大小写字母  中随机四位验证码  (不强制要求 a. 没有重复  b.数字 大写 小写 都要出现至少依次   )
    // 1. 页面加载时 => 随机验证码
    // 2. 点击切换验证码

</script>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头

    // 安装从易到难的顺序:
    // a. 6-12位
    // b. 切不能以数字开头
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符


    // 1. 获取元素
    // 通过class名获取元素,并取出数组中的第一个
    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user_tips")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdTips = document.getElementsByClassName("pwd_tips")[0];
    
    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneTips = document.getElementsByClassName("phone_tips")[0];
    
    var emailInp = document.getElementsByClassName("email")[0];
    var emailTips = document.getElementsByClassName("email_tips")[0];

    var codeInp = document.getElementsByClassName("code")[0];
    var codeTips = document.getElementsByClassName("code_tips")[0];
    
    var createCodeSpan = document.getElementsByClassName("createCode")[0];

    var btn = document.getElementsByClassName("btn")[0];
    console.log(userInp, userTips, btn);

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;
    var isCodeOk = false;

    createCodeSpan.innerText = randCode();
    createCodeSpan.onclick = function(){
        createCodeSpan.innerText = randCode();
    }

    userInp.onchange = function(){
        var user = userInp.value.trim();
        userInp.value = user;
        
        isUserOk = false;

        var lenReg = /^\S{6,12}$/;  // 6-12位
        var startReg = /^[^0-9]/;   // 非数字开头
        var illegal = /[^0-9a-zA-Z_$]/; // 是否存在非法字符

        if(!lenReg.test(user)){ //长度有误
            userTips.textContent = "用户名需要在6-12位之间";
            userTips.className = "user_tips error";
        }else if(!startReg.test(user)){ // 开头有误
            userTips.textContent = "用户名不能以数字开头";
            userTips.className = "user_tips error";
        }else if(illegal.test(user)){ // 有非法字符
            userTips.textContent = "用户名由数字,字母,下划线,$组成";
            userTips.className = "user_tips error";
        }else{
            userTips.textContent = "√";
            userTips.className = "user_tips right";
            isUserOk = true;
        }

    }



    pwdInp.onchange = function(){
        var pwd = pwdInp.value.trim();
        pwdInp.value = pwd;

        isPwdOk = false;

        var uReg = /^[\w$]{6,12}$/;

        if(uReg.test(pwd)){

            // 密码强度
            var isExistNum = /[0-9]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistSpe = /[_$]/.test(pwd);

            var level = isExistNum + isExistBig + isExistSmall + isExistSpe;

            switch(level){
                case 1:pwdTips.textContent = "密码强度:弱";break;
                case 2:pwdTips.textContent = "密码强度:中";break;
                case 3:pwdTips.textContent = "密码强度:强";break;
                case 4:pwdTips.textContent = "密码强度:超强";break;
            }
            pwdTips.className = "pwd_tips right";
            isPwdOk = true;
        }else{
            pwdTips.textContent = "密码由数字、字母、下划线、$组成,6-12位";
            pwdTips.className = "pwd_tips error";
        }

    } 

    phoneInp.onchange = function(){
        var phone = phoneInp.value.trim();
        phoneInp.value = phone;

        isPhoneOk = false;

        var uReg = /^1[3-9]\d{9}$/;

        if(uReg.test(phone)){
            phoneTips.textContent = "√";
            phoneTips.className = "phone_tips right";
            isPhoneOk = true;
        }else{
            phoneTips.textContent = "手机号格式有误";
            phoneTips.className = "phone_tips error";
        }

    } 

    // 123123@qq.com
    // a123123@163.com
    // a123123@gmail.com
    // a123123@1000phone.com
    emailInp.onchange = function(){
        var email = emailInp.value.trim();
        emailInp.value = email;

        isEmailOk = false;

        // 网易
        // var uReg = /^[a-zA-Z]\w{5,17}@(vip\.)?(163|126|yeah)\.(com|net)$/;

        var uReg = /^[a-zA-Z]\w{5,17}@\w{2,}\.(com|net)$/;
        // var uReg = /^\w+@\w+\.\w+$/;

        if(uReg.test(email)){
            emailTips.textContent = "√";
            emailTips.className = "email_tips right";
            isEmailOk = true;
        }else{
            emailTips.textContent = "邮箱格式有误";
            emailTips.className = "email_tips error";
        }

    } 


    codeInp.onchange = function(){
        var code = codeInp.value.trim();
        codeInp.value = code;

        isCodeOk = false;

        // 将随机的验证码取出 => 作为规则
        var randText = createCodeSpan.innerText;
        var codeReg = new RegExp("^"+randText+"$","i");

        if(codeReg.test(code)){
            codeTips.textContent = "√";
            codeTips.className = "code_tips right";
            isCodeOk = true;
        }else{
            codeTips.textContent = "×";
            codeTips.className = "code_tips error";
        }

    } 


    // 用户名 密码 手机号 邮箱 验证码 全都成功 => 才能注册(提交数据到后台)

    btn.onclick = function(){
        if(isUserOk && isPwdOk && isPhoneOk && isEmailOk && isCodeOk){
            alert("可以注册");
        }
    }

</script>

</html>